
*{
	margin:0;
	padding: 0;
}
li{
	list-style: none;
}
.wrap{
	position: relative;
	height: 800px;
	width: 100%;
	background-color: #F3F3F3;
}
.wrap .registerbox{
	position: absolute;
	    top:calc(100% - 50% - 320px);
    left: calc(100% - 50% - 225px);
	width: 450px;
	height: 550px;
	border: 1px solid #dadada;
	background-color: #FFFFFF;
	border-radius: 12px;
}

.wrap .registerbox .registerlogo{
	position: absolute;
	top: calc(100% - 90%);
	left:calc(100% - 50% - 40px);
}
.wrap .registerbox .registerlogo img{
	border-radius: 50%;
}
.wrap .registerbox .text{
	position: absolute;
	top: calc(100% - 70%);
	left:calc(100% - 50% - 125px);
}
.wrap .registerbox .text h4{
	color: #333;
    font-weight: 400;
    font-size: 1.2em;
}
.wrap .registerbox .input{
	position: absolute;
	top: calc(100% - 60%);
	left:calc(100% - 50% - 185px);
}
.wrap .registerbox .input li{
	margin-top: 20px;
}
.wrap .registerbox .input img:hover{
  opacity: 1;
}
.wrap .registerbox .input div{
	float: left;
	width: 46px;
	height: 46px;
	border:1px solid #ACACAC;
	border-radius: 5px 0 0 5px;
}
.wrap .registerbox .input img{
	display: block;
	margin: 0 auto;
	padding: 25%;
	cursor: pointer;
	opacity: 0.5;
}
.wrap .registerbox .input  input{
	width: 293px;
	height: 20px;
	padding: 12px 12px 12px 15px;
}
.wrap .registerbox .Joption{
	position: absolute;
	top: calc(100% - 30% - 20px);
	left:calc(100% - 50% - 185px);
}
.wrap .registerbox .Joption span{
	font-size: 0.6em;
	line-height: 20px;
	color: #737373;
}
.wrap .registerbox .Joption span a{
	text-decoration: none;
}
.wrap .registerbox .Joption input{
	width: 20px;
	height: 20px;
	border-radius: 5px;
}
.wrap .registerbox .login{
	position: absolute;
		top: calc(100% - 30% + 20px);
			left:calc(100% - 50% - 185px);
}
.wrap .registerbox .login input{
	width: 370px;
	height: 48px;
	background-color: #858FFF;
	color: #FFFFFF;
	font-size: 1.4em;
	border-radius: 5px;
}
.wrap .registerbox .loginfoot{
		position: absolute;
		top: calc(100% - 10% - 20px);
		left:calc(100% - 50% - 185px);
		width: 370px;
		border-top: 1px solid #CDCDCD;
}
.wrap .registerbox .loginfoot .loginfoot1{
	float: left;
	display: block;
	margin-top: 30px;
	font-size: 0.8em;
	color: #6E6E6E;
}
.wrap .registerbox .loginfoot .loginfoot2{
	display: block;
	margin-top: 30px;
	font-size: 0.8em;
	color: #6E6E6E;
}
.wrap .registerbox .loginfoot .loginfoot2{
	float: right;
}
.wrap .registerbox .loginfoot .loginfoot2:hover{
	color: #5261BF;
	cursor: pointer;
}

.wrap .registerbox .loginfoot #menu_btn1{
	float: left;
		margin-top: 25px;
	 background: url(../src/register/wechat.jpg) 0 0 no-repeat;
        width: 30px;
        height: 30px;
        display: block;
}
.wrap .registerbox .loginfoot #menu_btn2{
		float: left;
			margin-top: 25px;
	 background: url(../src/register/sina.jpg) 0 0 no-repeat;
        width: 30px;
        height: 30px;
        display: block;
}
.wrap .registerbox .loginfoot #menu_btn3{
		float: left;
			margin-top: 25px;
	 background: url(../src/register/qq.jpg) 0 0 no-repeat;
        width: 30px;
        height: 30px;
        display: block;
}
.wrap .registerbox .loginfoot #menu_btn1:hover{
	 background: url(../src/register/wecahtgreen.jpg) 0 0 no-repeat;
}
.wrap .registerbox .loginfoot #menu_btn2:hover{
	 background: url(../src/register/sinared.jpg) 0 0 no-repeat;
}
.wrap .registerbox .loginfoot #menu_btn3:hover{
	 background: url(../src/register/qqblue.jpg) 0 0 no-repeat;
}
.wrap .wrapfoot{
	position: absolute;
	width: 100%;
	top:calc(100% - 10%);
}
.wrap .wrapfoot h4{
	color: #757575;
	font-size: 0.7em;
	text-align: center;
	line-height: 20px;
}
.wrap .wrapfoot span{
	color: #406dd6;
	padding-left: 10px;
	margin-left:  10px;
	border-left: 1px solid  #757575;
	cursor: pointer;
}
.wrap .wrapfoot h4:last-child{
	color: #406dd6;
}
